<template>
  <div class="container">
    <h1>{{ msg }}</h1>
    <div class="tab-header">
      <span v-for="(item, index) in list" @click="handleClick(index)" :key="item.id">{{ item.cityName }}</span>
    </div>
    <div>
      {{ list[tabIndex].children }}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: 'hello world',
      tabIndex: 0, // 绑定一个全局的下标
      list: [
        {
          id: 1,
          cityName: '北京',
          children: [
            {
              id: '1-1',
              countName: '海淀区',
            },
            {
              id: '1-2',
              countName: '朝阳区',
            },
            {
              id: '1-2',
              countName: '丰台区',
            },
          ],
        },
        {
          id: 2,
          cityName: '上海',
          children: [
            {
              id: '2-1',
              countName: '奉贤区',
            },
            {
              id: '2-2',
              countName: '松江区',
            },
          ],
        },
      ],
    }
  },
  methods: {
    handleClick(index) {
      console.log(index, 'index')
      this.tabIndex = index
    },
  },
}
</script>
